<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style type="text/css">
		*{
			list-style: none;
			margin: 0px;
			padding: 0px;
		}
		.mid{
			margin: 0 auto;
			width: 1226px;
			height: 460px;
			position: relative;
		}
		.slider{
			width: 1226px;
			height: 460px;
			position: relative;
			
		}
		.sliderItem{
			position: absolute;
			top: 0px;
		}
		.click_list{
			position: absolute;
			right: 100px;
			bottom: 20px; 
		}
		.click_list li{
			width: 10px;
			height: 10px;
			margin-right: 5px;
			background: gray url() 0 0 no-repeat;
			float: left;
			border-radius: 50%;
			border: 1px solid #333;
			cursor: pointer;
			z-index:10;
		}
		.click_list li:hover{
			background: #fff url() 0 0 no-repeat;
		}
		.click_left{
			width: 41px;
			height: 70px;
			background: url(./img/icon-slides.png) -84px 0 no-repeat;
			position: absolute;
			top:50%;
			left: 234px;
			margin-top: -35px;
			cursor: pointer;
			z-index:10;
		}
		.click_left:hover{
			background-position: 0 0 ;
		}
		.click_right{
			width: 41px;
			height: 70px;
			background: url(./img/icon-slides.png) -126px 0 no-repeat;
			position: absolute;
			top:50%;
			right: 0px;
			margin-top: -35px;
			cursor: pointer;
			z-index:10;
		}
		.click_right:hover{
			background-position: -42px 0 ;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			sliderItem = document.getElementsByClassName("sliderItem");
			clickList = document.getElementsByClassName("click_list")[0].getElementsByTagName("li");
			click_right =  document.getElementsByClassName('click_right')[0];

			click_left =  document.getElementsByClassName('click_left')[0];
			mid = document.getElementsByClassName('mid')[0];

			num=0;
			function run(){
				for(var i=0;i<sliderItem.length;i++){
					sliderItem[i].style.display="none";
					clickList[i].style.backgroundColor="gray";
				}

				sliderItem[num].style.display="block";
				clickList[num].style.backgroundColor="white";
				if (num==sliderItem.length-1) {
					num=0;
				}else{
					num++;
				}
			}

			// function backRun(){
			// 	for(var i=0;i<sliderItem.length;i++){
			// 		sliderItem[i].style.display="none";
			// 		clickList[i].style.backgroundColor="gray";
			// 	}

			// 	sliderItem[num].style.display="block";
			// 	clickList[num].style.backgroundColor="white";
			// 	if (num==0) {
			// 		num=sliderItem.length-1;
			// 	}else{
			// 		num--;
			// 	}
			// }

			mid.onmouseover = function  () {
				clearInterval(time);
			}

			mid.onmouseout = function  () {
				time = setInterval(run, 1000);
			}
			time = setInterval(run,1000);
			for (var i = 0; i < clickList.length; i++) {
				addClick(i);
			};


			function addClick (k) {
				clickList[k].onclick = function  () {
					num = k;
					run();
				}
			}
			click_right.onclick = function  () {
				run();
			}

			click_left.onclick = function  () {
				if(num==0){
					num=sliderItem.length-2;
				}else if(num==1){
					num=sliderItem.length-1;
				}else{num=num-2;}
				
				run();
			}
		}
	</script>
</head>
<body>
	<div class="mid">
		<ul class="slider">
			<li class="sliderItem"><a href=""><img src="./img/xmad_15142935262383_cBEjQ.jpg" alt=""></a></li>
			<li class="sliderItem"><a href=""><img src="./img/xmad_15144616645791_zJaAK.jpg" alt=""></a></li>
			<li class="sliderItem"><a href=""><img src="./img/xmad_15144614850864_AvtDN.jpg" alt=""></a></li>
			<li class="sliderItem"><a href=""><img src="./img/xmad_15145133445118_rGDpF.jpg" alt=""></a></li>
			<li class="sliderItem"><a href=""><img src="./img/xmad_1513304443358_gzjfM.jpg" alt=""></a></li>
		</ul>
		<div class="click_left"></div>
		<div class="click_right"></div>
		<ul class="click_list">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>